<template>
    <el-container>
      <!--background-color: #f4645f;-->
      <el-header>
        <el-container  style="height: 200px; background-image:url(http://image.golaravel.com/5/c9/44e1c4e50d55159c65da6a41bc07e.jpg);">
          <div style="width:100%;height:100px;margin-top:40px;/*background-color: black;*/">
            <div style="width: 20%;height: 80%; margin:0px auto;/*background-color: #5daf34;*/">
              <h1 style="line-height: 80px;font-size: 44px;color: white;">
                丁 丁 的 一 个
              </h1>
            </div>
          </div>

          <div style="position:absolute;top:155px; width:100%;height:20px;/*background-color: black;*/">
            <div style="width:33%;height: 80%; margin:0px auto;/*background-color: #5daf34;*/">
              <button class="button" style="">首&nbsp;&nbsp;页</button>
              <button class="button" style="">文章分类</button>
              <button class="button" style="">文章列表</button>
              <button class="button" style="">碎玉</button>
              <button class="button" style="">联系</button>
              <!--<button class="button" style="">朴素按钮</button>-->
            </div>
          </div>
        </el-container>
      </el-header>

      <el-main>
        <div style="margin-top: 11em;margin-left: 21em;display: inline-block;float: left;">
          <div style="width:50%;height:12em;margin-top:2em;background-color: white;text-indent:2em;padding:15px;box-shadow:1px 1px 2px 2px grey;border: 1px solid grey;">
            <h3 style="line-height:3em;display:inline-block;">文章标题</h3>
            <i class="el-icon-view" style="font-size:16px;display: inline-block;padding-left: 55%;">111</i>
            <i class="el-icon-warning" style="font-size: 16px;margin-left: -11px;">111</i>
            <p>构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8Vue构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8</p>
            <i class="el-icon-tickets" style="font-size: 16px;padding-left: 11px;margin-top: 1em;">111</i>
            <i class="el-icon-time" style="font-size: 16px;padding-left: 70%;">时间</i>
          </div>
          <div style="width:50%;height:12em;margin-top:2em;background-color: white;text-indent:2em;padding: 15px;box-shadow:1px 1px 2px 2px grey;border: 1px solid grey;">
            <h3 style="line-height:3em;display:inline-block;">文章标题</h3>
            <i class="el-icon-view" style="font-size:16px;display: inline-block;padding-left: 55%;">111</i>
            <i class="el-icon-warning" style="font-size: 16px;margin-left: -11px;">111</i>
            <p>构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8Vue构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8</p>
            <i class="el-icon-tickets" style="font-size: 16px;padding-left: 11px;margin-top: 1em;">111</i>
            <i class="el-icon-time" style="font-size: 16px;padding-left: 70%;">时间</i>
          </div>
          <div style="width:50%;height:12em;margin-top:2em;background-color: white;text-indent:2em;padding: 15px;box-shadow:1px 1px 2px 2px grey;border: 1px solid grey;">
            <h3 style="line-height:3em;display:inline-block;">文章标题</h3>
            <i class="el-icon-view" style="font-size:16px;display: inline-block;padding-left: 55%;">111</i>
            <i class="el-icon-warning" style="font-size: 16px;margin-left: -11px;">111</i>
            <p>构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8Vue构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8</p>
            <i class="el-icon-tickets" style="font-size: 16px;padding-left: 11px;margin-top: 1em;">111</i>
            <i class="el-icon-time" style="font-size: 16px;padding-left: 70%;">时间</i>
          </div>
          <div style="width:50%;height:12em;margin-top:2em;background-color: white;text-indent:2em;padding: 15px;box-shadow:1px 1px 2px 2px grey;border: 1px solid grey;">
            <h3 style="line-height:3em;display:inline-block;">文章标题</h3>
            <i class="el-icon-view" style="font-size:16px;display: inline-block;padding-left: 55%;">111</i>
            <i class="el-icon-warning" style="font-size: 16px;margin-left: -11px;">111</i>
            <p>构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8Vue构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8</p>
            <i class="el-icon-tickets" style="font-size: 16px;padding-left: 11px;margin-top: 1em;">111</i>
            <i class="el-icon-time" style="font-size: 16px;padding-left: 70%;">时间</i>
          </div>
          <div style="width:50%;height:12em;margin-top:2em;background-color: white;text-indent:2em;padding: 15px;box-shadow:1px 1px 2px 2px grey;border: 1px solid grey;">
            <h3 style="line-height:3em;display:inline-block;">文章标题</h3>
            <i class="el-icon-view" style="font-size:16px;display: inline-block;padding-left: 55%;">111</i>
            <i class="el-icon-warning" style="font-size: 16px;margin-left: -11px;">111</i>
            <p>构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8Vue构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8</p>
            <i class="el-icon-tickets" style="font-size: 16px;padding-left: 11px;margin-top: 1em;">111</i>
            <i class="el-icon-time" style="font-size: 16px;padding-left: 70%;">时间</i>
          </div>
          <div style="width:50%;height:12em;margin-top:2em;background-color: white;text-indent:2em;padding: 15px;box-shadow:1px 1px 2px 2px grey;border: 1px solid grey;">
            <h3 style="line-height:3em;display:inline-block;">文章标题</h3>
            <i class="el-icon-view" style="font-size:16px;display: inline-block;padding-left: 55%;">111</i>
            <i class="el-icon-warning" style="font-size: 16px;margin-left: -11px;">111</i>
            <p>构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8Vue构建前台页面过程1Vue构建前台页面过程2Vue构建前台页面过程3Vue构建前台页面过程4Vue构建前台页面过程5Vue构建前台页面过程6Vue构建前台页面过程7Vue构建前台页面过程8</p>
            <i class="el-icon-tickets" style="font-size: 16px;padding-left: 11px;margin-top: 1em;">111</i>
            <i class="el-icon-time" style="font-size: 16px;padding-left: 70%;">时间</i>
          </div>
        </div>
        <div style="margin-top:-94em;margin-right:21em;display: inline-block;float: right;">
          <div style="width: 24em;height: 15em;background-color: white;border: 1px solid grey;box-shadow:1px 1px 2px 2px grey;">
            <h2 style="text-align:center;line-height: 3em;">Z X H</h2>
            <hr style="height:1px;border:none;border-top:2px solid red;margin:0 7%;" />
            <i class="el-icon-location-outline" style="font-size:17px;font-weight:500;margin-top: 1em; padding-left: 10%;">上海&普陀</i>
            <i class="el-icon-location-outline" style="font-size:17px;font-weight:500;margin-top: 1em; padding-left: 15%;">Java开发</i>
          </div>
          <div style="margin-top:2em;width: 24em;height: 15em;background-color: white;border: 1px solid grey;box-shadow:1px 1px 2px 2px grey;">
            <h2 style="text-align: center;line-height: 3em;">最新文章</h2>
            <a href="#" style="text-align:center;display: block;">文章1</a>
            <a href="#" style="text-align:center;display: block;">文章1</a>
            <a href="#" style="text-align:center;display: block;">文章1</a>
            <a href="#" style="text-align:center;display: block;">文章1</a>
          </div>
        </div>
      </el-main>

      <div style="border-top: 1px solid #A8A8A8; height: 5em;background-color: black;box-shadow:1px 1px 1px 2px #A8A8A8;">
        <h2 style="text-align:center;line-height: 3em;color: yellow;">Made in China</h2>
      </div>
    </el-container>
</template>

<script>
    export default {
      name: "index",
    }
</script>

<style scoped>
  .el-header {
    padding: 0!important;
  }


  .button {
    width: 90px;
    display: inline-block;
    padding: 6px;
    font-size: 15px;
    /*font-weight: 600;*/
    font-family:Microsoft YaHei;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #f3726d;
    border: 1px solid red;
    border-radius: 5px;
    box-shadow: 0 3px #999;
  }

  .button:hover {
    background-color: black;
  }

  .button:active {
    background-color: grey;
    box-shadow: 0 3px #666;
    transform: translateY(2px);
  }
</style>
